<template>
  <a-drawer
    title="院区详情"
    :maskClosable="true"
    width="600"
    placement="right"
    :closable="true"
    @close="handleCancel"
    :destroyOnClose="true"
    :visible="visible"
  >
    <a-form-model
      ref="ruleForm"
      :model="formInfo"
      :label-col="$global.labelCol"
      :wrapper-col="$global.wrapperCol"
    >
      <a-row>
        <a-col>
          <a-form-model-item label="院区名称" prop="campusName" :maxLength="50">
            <a-input
              v-model="formInfo.campusName"
              placeholder="请输入院区名称"
              disabled
              class="input"
              style="margin-top: 10px"
            />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col>
          <a-form-model-item label="使用面积" prop="usableArea" :maxLength="50">
            <a-input
              v-model="formInfo.usableArea"
              placeholder="请输入使用面积"
              disabled
              class="input"
              style="margin-top: 10px"
            />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col>
          <a-form-model-item
            label="所在位置"
            prop="campusAddress"
            :maxLength="50"
            disabled
          >
            <a-input
              v-model="formInfo.campusAddress"
              placeholder="请输入详细地址"
              disabled
              class="input"
              style="margin-top: 10px"
            />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col>
          <a-form-model-item label="介绍" prop="introduce" :maxLength="50">
            <a-input
              disabled
              type="textarea"
              :row="4"
              v-model="formInfo.introduce"
              placeholder="请输入"
              class="input"
            />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row style="margin-top: 20px">
        <a-col>
          <a-form-model-item label="图片" prop="pictureImage" :maxLength="50">
            <w-image-upload
              :disabled="true"
              class="avatar-uploader"
              text="上传"
              :multipleFlag="false"
              :file-max-size="1"
              v-model="formInfo.pictureImage"
              bizPath="companyPic"
            ></w-image-upload>
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row style="margin-top: 20px">
        <a-col>
          <a-form-model-item label="附件" prop="enclosure" :maxLength="50">
            <w-file-upload
              :disabled="true"
              class="avatar-uploader"
              text="上传"
              :pdfOnly="true"
              :multipleFlag="true"
              v-model="formInfo.enclosure"
              bizPath="annexUrl"
            >
            </w-file-upload>
          </a-form-model-item>
        </a-col>
      </a-row>
    </a-form-model>
  </a-drawer>
</template>

<script>
import pick from 'lodash.pick'
import { getAction } from '@/api/manage'
import WImageUpload from '@/components/WxImageUpload/WImageUpload'
import WFileUpload from '@/components/WxFileUpload/WFileUpload.vue'
export default {
  name: 'DevCampusAreaView',
  components: { WImageUpload, WFileUpload },
  data() {
    return {
      visible: false,
      confirmLoading: false,
      formInfo: {},
      url: {
        saveInfo: '/system/devCampusArea/save',
        getInfo: '/system/devCampusArea/info',
      },
    }
  },
  created() {},
  methods: {
    show(record) {
      this.formInfo = Object.assign({}, record)
      if (this.formInfo.id) {
        getAction(this.url.getInfo, { id: record.id }).then((res) => {
          this.$nextTick(() => {
            this.formInfo = pick(
              res.result.data,
              'id',
              'createTime',
              'campusName',
              'usableArea',
              'campusAddress',
              'introduce',
              'pictureImage',
              'enclosure'
            )
          })
        })
      }
      this.visible = true
    },
    // 确定
    handleSubmit() {
      this.visible = false
    },
    // 关闭
    handleCancel() {
      this.close()
    },
    close() {
      this.visible = false
    },
  },
}
</script>
<style scoped>
/* 输入框高度统一 */
.input {
  border: none; /* 隐藏边框 */
  background-color: transparent; /* 背景透明 */
  /* 或者设置一个特定的颜色 */
  color: #676767;
  font-size: 15px;
  height: 17px;
}
</style>
